import {ProColumns} from '@ant-design/pro-components';
import { Modal } from 'antd';
import React, {useEffect, useRef} from 'react';
import {ProTable} from "@ant-design/pro-table/lib";
import {ProFormInstance} from "@ant-design/pro-form/lib";

// 定义属性
export type Props = {
  values:API.InterfaceInfo;
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: ( ) => void;
  onSubmit: (values:API.InterfaceInfo) => Promise<void>;
  visible: boolean;
 };


const UpdateModal: React.FC<Props> = (props) => {
  const {values,visible,columns,onCancel,onSubmit} = props;

  // 通过useRef创建的引用，用于引用  《表单组件的实例》
  const formRef = useRef<ProFormInstance>();

  /**
   * 使用了useEffect钩子来监听values的变化。当values发生变化时，会执行回调函数
   * 回调函数中，首先进行了一个条件判断 if(formRef)，确保formRef存在。然后使用可选链操作符?.来调用setFieldsValue(values),
   * 来更新表单的 value值
   *
   * <ProTable>元素被设置成了表单类型，以便能够自动处理表单提交事件
   *
   */
  useEffect(()=>{
     if(formRef){
       formRef.current?.setFieldsValue(values);
     }
  },[values])

  return (
    <Modal visible = {visible} footer={null} onCancel={() => onCancel?.()}>
      <ProTable
        type="form"
        formRef = {formRef}   //展示表单实例（也就是修改表单时显示原数据）
        columns = {columns}
        onSubmit={async (value) => {
          onSubmit?.(value);
      }}/>
    </Modal>

  );
};

export default UpdateModal;
